<template>
  <boss-view>
    <div slot="content" class="capitalData">
      <!-- 选择月 -->
      <select-time @onTime="onTime"></select-time>
      <!-- main -->
      <div class="main">
        <!-- 实际支出 / 预算支出 / 支出 -->
        <view-item>
          <div slot="mainData" class="expenditure">
            <div class="top">
              <div class="left">
                <!-- 实际支出 -->
                <div class="actualExpenditure actualFontColor">
                  <p class="title">实际支出</p>
                  <div class="num">
                    <span>
                      {{parseInt(totalData.actualExpenditure)}}
                      <i
                        v-if="(Math.floor(totalData.actualExpenditure*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(totalData.actualExpenditure*100)/100).toString().substring((Math.floor(totalData.actualExpenditure*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.actualExpenditure*100)/100).toString().length)}}</i>
                    </span>
                    <i class="units">万元</i>
                  </div>
                </div>
                <!-- 预算支出 -->
                <div class="budgetExpenditure budgetFontColor">
                  <p class="SmallTitle">预算支出</p>
                  <div class="SmallNum">
                    <span>
                      {{parseInt(totalData.planExpenditure)}}
                      <i
                        v-if="(Math.floor(totalData.planExpenditure*100)/100).toString().lastIndexOf('.') >= 0"
                      >{{(Math.floor(totalData.planExpenditure*100)/100).toString().substring((Math.floor(totalData.planExpenditure*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.planExpenditure*100)/100).toString().length)}}</i>
                    </span>
                    <i class="units">万元</i>
                  </div>
                </div>
              </div>
            </div>
            <!-- 支出 -->
            <div class="expenditureChart">
              <main-title>
                <span slot="txt" class="txt">支出</span>
              </main-title>
              <div class="chartTips">单位:万元</div>
              <bar-charts
                slot="main"
                v-model="expendArr"
                :option="expendOption"
                :chartStyle="'min-height:265px;'"
              ></bar-charts>
            </div>
          </div>
        </view-item>
        <i class="bossVersion">&#xe613;</i>

        <!-- 实际回款 / 预算回款 / 回款 -->
        <view-item>
          <div slot="mainData" class="returnMoney">
            <!-- 实际回款 -->
            <div class="actualReturnMoney actualFontColor">
              <p class="title">实际回款</p>
              <div class="num">
                <span>
                  {{parseInt(totalData.actualMoneyBack)}}
                  <i
                    v-if="(Math.floor(totalData.actualMoneyBack*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(totalData.actualMoneyBack*100)/100).toString().substring((Math.floor(totalData.actualMoneyBack*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.actualMoneyBack*100)/100).toString().length)}}</i>
                </span>
                <i class="units">万元</i>
              </div>
            </div>
            <!-- 预算回款 -->
            <div class="budgetReturnMoney budgetFontColor">
              <p class="SmallTitle">预算回款</p>
              <div class="SmallNum">
                <span>
                  {{parseInt(totalData.planMoneyBack)}}
                  <i
                    v-if="(Math.floor(totalData.planMoneyBack*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(totalData.planMoneyBack*100)/100).toString().substring((Math.floor(totalData.planMoneyBack*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.planMoneyBack*100)/100).toString().length)}}</i>
                </span>
                <i class="units">万元</i>
              </div>
            </div>
            <!-- 回款 -->
            <div class="returnMoneyChart">
              <main-title>
                <span slot="txt" class="txt">回款</span>
              </main-title>
              <div class="chartTips">单位:万元</div>
              <bar-charts
                slot="main"
                v-model="returnedMoneyArr"
                :option="returnedMoneyOption"
                :chartStyle="'min-height:258px;'"
              ></bar-charts>
            </div>
          </div>
        </view-item>
        <i class="bossVersion">&#xe613;</i>

        <!-- 收支差额 / 期初余额 / 期末余额 -->
        <view-item>
          <div slot="mainData" class="difference">
            <!-- 实际收支差额 / 预算收支差额 -->
            <div class="top">
              <!-- 实际收支差额 -->
              <div class="actualDifference actualFontColor">
                <div class="title">实际收支差额</div>
                <div class="num">
                  <span>
                    {{parseInt(totalData.actualPaymentsBalance)}}
                    <i
                      v-if="(Math.floor(totalData.actualPaymentsBalance*100)/100).toString().lastIndexOf('.') >= 0"
                    >{{(Math.floor(totalData.actualPaymentsBalance*100)/100).toString().substring((Math.floor(totalData.actualPaymentsBalance*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.actualPaymentsBalance*100)/100).toString().length)}}</i>
                  </span>
                  <i class="units">万元</i>
                </div>
              </div>
              <!-- 预算收支差额 -->
              <div class="budgetDifference budgetFontColor">
                <div class="title">预算收支差额</div>
                <div class="num">
                  <span>
                    {{parseInt(totalData.planPaymentsBalance)}}
                    <i
                      v-if="(Math.floor(totalData.planPaymentsBalance*100)/100).toString().lastIndexOf('.') >= 0"
                    >{{(Math.floor(totalData.planPaymentsBalance*100)/100).toString().substring((Math.floor(totalData.planPaymentsBalance*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.planPaymentsBalance*100)/100).toString().length)}}</i>
                  </span>
                  <i class="units">万元</i>
                </div>
              </div>
            </div>
            <div class="bot">
              <!-- 期初余额 -->
              <div class="first">
                <div class="title">期初余额</div>
                <div class="num">
                  <span>
                    {{parseInt(totalData.beginningBalances)}}
                    <i
                      v-if="(Math.floor(totalData.beginningBalances*100)/100).toString().lastIndexOf('.') >= 0"
                    >{{(Math.floor(totalData.beginningBalances*100)/100).toString().substring((Math.floor(totalData.beginningBalances*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.beginningBalances*100)/100).toString().length)}}</i>
                  </span>
                  <i class="units">万元</i>
                </div>
              </div>
              <!-- 期末余额 -->
              <div class="end">
                <div class="title">期末余额</div>
                <div class="num">
                  <span>
                    {{parseInt(totalData.endingBalance)}}
                    <i
                      v-if="(Math.floor(totalData.endingBalance*100)/100).toString().lastIndexOf('.') >= 0"
                    >{{(Math.floor(totalData.endingBalance*100)/100).toString().substring((Math.floor(totalData.endingBalance*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.endingBalance*100)/100).toString().length)}}</i>
                  </span>
                  <i class="units">万元</i>
                </div>
              </div>
            </div>
          </div>
        </view-item>
      </div>
    </div>
  </boss-view>
</template>

<script>
import mainTitle from "@/components/bossVersion/mainTitle";
import ICountUp from "vue-countup-v2";
import viewItem from "@/components/bossVersion/viewItem";
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import selectTime from "@/components/bossVersion/selectTime";
import bossView from "@/components/bossVersion/bossView";
import {
  GetFinancialCapitalFlow,
  GetDataByDoubleTarget
} from "@/api/finance/index";
export default {
  components: {
    barCharts,
    pieChart,
    mainTitle,
    ICountUp,
    viewItem,
    selectTime,
    bossView
  },
  data() {
    return {
      totalData: {
        actualExpenditure: 0, //  实际支出 ,
        planExpenditure: 0, //  预算支出 ,
        actualMoneyBack: 0, //  实际回款 ,
        planMoneyBack: 0, //  预算回款 ,
        actualPaymentsBalance: 0, //  实际收支差额 ,
        planPaymentsBalance: 0, //  预算收支差额 ,
        beginningBalances: 0, //  期初余额 ,
        endingBalance: 0 //  期末余额
      },
      borrowingOption: {
        color: ["#28e787", "#f0bd26", "#48e5ff", "#ff3e9a", "#FF7145"],
        radius: ["55%", "70%"],
        center: ["50%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return (
            "{value|" + value.name + "}"
            // "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
          );
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      expendArr: [], // 支出
      expendOption: {
        hidePieMargin: true,
        color: ["#48e5ff", "#f0bd26"],
        legend: {
          top: 10,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: 50,
          left: "3%",
          height: 190
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1
        // startColor: ["#0071BC", "#29AAE1"],
        // endColor: ["#006837", "#22B473"]
      },
      returnedMoneyArr: [], // 回款
      returnedMoneyOption: {
        barWidth: 20,
        hidePieMargin: true,
        color: ["#28e787", "#f0bd26"],
        legend: {
          top: 10,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: 50,
          left: "7%",
          height: 180
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1
        // startColor: ["#0071BC", "#29AAE1"],
        // endColor: ["#006837", "#22B473"]
      }
    };
  },
  mounted() {},
  methods: {
    onTime(time) {
      this.$set(this, "totalData", {
        actualExpenditure: 0, //  实际支出 ,
        planExpenditure: 0, //  预算支出 ,
        actualMoneyBack: 0, //  实际回款 ,
        planMoneyBack: 0, //  预算回款 ,
        actualPaymentsBalance: 0, //  实际收支差额 ,
        planPaymentsBalance: 0, //  预算收支差额 ,
        beginningBalances: 0, //  期初余额 ,
        endingBalance: 0 //  期末余额
      });
      this.$set(this, "expendArr", []);
      this.$set(this, "returnedMoneyArr", []);
      this.fetchTotalData(time);
      this.fetchexpendArrData(time);
      this.fetchreturnedMoneyArrData(time);
    },
    async fetchTotalData(time) {
      const p = {
        startTime: time.startTime,
        endTime: time.endTime,
        plateId: "9001"
      };
      try {
        var res = await GetFinancialCapitalFlow(p);
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async fetchexpendArrData(time) {
      const p = {
        startTime: time.startTime,
        endTime: time.endTime,
        queryType: "56002",
        plateId: "9001"
      };
      try {
        var res = await GetDataByDoubleTarget(p);
        if (res.data.code === "0") {
          this.$set(this, "expendArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async fetchreturnedMoneyArrData(time) {
      const p = {
        startTime: time.startTime,
        endTime: time.endTime,
        queryType: "56003",
        plateId: "9001"
      };
      try {
        var res = await GetDataByDoubleTarget(p);
        if (res.data.code === "0") {
          this.$set(this, "returnedMoneyArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/bossVersion/_basics";

.capitalData {
  @include absoluteAllSides(94, 20, 20, 140, 1);
  .main {
    @include flex;
    margin-top: 84px;
    .actualFontColor {
      color: $color3;
    }
    .budgetFontColor {
      color: $budget;
    }
    .title {
      margin-bottom: 5px;
      @include bold(20px);
    }
    .SmallTitle {
      margin-bottom: 5px;
      @include bold(18px);
    }
    .num {
      & > span {
        @extend .inlineFlexYbase;
        @include din(46px);
        & > i {
          font-size: 24px;
        }
      }
    }
    .SmallNum {
      & > span {
        @extend .inlineFlexYbase;
        @include din(40px);
        & > i {
          font-size: 24px;
        }
      }
    }
    .units {
      font-size: 16px;
    }
    .item {
      margin-right: 0;
      line-height: 1;
      &:nth-of-type(1) {
        width: 869px;
        height: 602px;
        // 支出
        & > .expenditure {
          padding: 56px 35px 35px 28px;
          & > .top {
            @include flexYcen;
            & > .left {
              position: relative;
              z-index: 1;
              min-width: 320px;
              & > .actualExpenditure,
              & > .budgetExpenditure {
                margin-left: 22px;
              }
              & > .budgetExpenditure {
                padding-bottom: 30px;
                margin-top: 10px;
              }
              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 1px;
                background-color: $color9;
              }
            }
          }

          // 支出
          .expenditureChart {
            position: relative;
            padding-top: 40px;
            & > .chartTips {
              @include absoluteTLSide(72, 0, 1);
            }
            & > .chart {
              margin-top: 25px;
            }
          }
        }
      }
      &:nth-of-type(2),
      &:nth-of-type(3) {
        width: 425px;
        height: 602px;
      }
      &:nth-of-type(2) {
        // 回款
        & > .returnMoney {
          padding: 56px 26px 40px 26px;
          & > .actualReturnMoney,
          & > .budgetReturnMoney {
            margin-left: 22px;
          }
          & > .budgetReturnMoney {
            position: relative;
            padding-bottom: 42px;
            margin-top: 10px;
          }
          & > .returnMoneyChart {
            position: relative;
            z-index: 1;
            padding-top: 40px;
            border-top: 1px solid $color9;
            & > .chartTips {
              @include absoluteTLSide(72, 0, 1);
            }
            & > .chart {
              margin-top: 32px;
            }
          }
        }
      }
      &:nth-of-type(3) {
        // 收支差额 / 期初余额 / 期末余额
        & > .difference {
          padding: 58px 12px 60px 50px;
          & > .top {
            // 实际收支余额
            & > .actualDifference {
              & > .title {
                margin-bottom: 0;
                @include bold(24px);
              }
              & > .num {
                & > span {
                  @include din(124px);
                  & > i {
                    font-size: 46px;
                  }
                }
                & > .units {
                  font-size: 24px;
                }
              }
            }
            // 预算收支余额
            & > .budgetDifference {
              padding-top: 18px;
              & > .title {
                margin-bottom: 0;
                @include bold(22px);
              }
              & > .num {
                & > span {
                  @include din(70px);
                  & > i {
                    font-size: 30px;
                  }
                }
                & > .units {
                  font-size: 24px;
                }
              }
            }
          }
          & > .bot {
            padding-top: 80px;
            & > .first {
              color: $color4;
              & .num {
                & > span {
                  @include din(40px);
                  & > i {
                    font-size: 20px;
                  }
                }
                & > .units {
                  font-size: 16px;
                }
              }
            }
            & > .end {
              margin-top: 12px;
              color: $color1;
              & .num {
                & > span {
                  @include din(40px);
                  & > i {
                    font-size: 20px;
                  }
                }
                & > .units {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
    i.bossVersion {
      padding-top: 75px;
      color: $color3;
      font-size: 12px;
    }
  }
}
</style>
